<template>
	<view>
		<van-popup :show="datePickerVisible" position="bottom"  @close="datePickerVisible=false">
	       <view class="header">
	           <!-- <view class="uni-title">日期：{{year}}年{{month}}月{{day}}日</view> -->
			   <!-- <div>不展示在我的主页<switch :checked="checked"  color="pink" @change="changeSwitch"/></div> -->
			   <div class="btn-confirm" @click="datePickerVisible=false">取消</div>
			   <div class="btn-confirm" @click="sendDate">确认</div>
	       </view>
	       <picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" style="height: 40vh;">
	           <picker-view-column>
	               <view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
	           </picker-view-column>
	           <picker-view-column>
	               <view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
	           </picker-view-column>
	           <picker-view-column>
	               <view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
	           </picker-view-column>
	       </picker-view>
		   </van-popup>
	   </view>
	   
</template>

<script>
	export default {

	    data: function () {
	        const date = new Date()
	        const years = []
	        const year = date.getFullYear()
	        const months = []
	        const month = date.getMonth() + 1
	        const days = []
	        const day = date.getDate();

			
	        for (let i = 1990; i <= date.getFullYear(); i++) {
	            years.push(i)
	        }
	        for (let i = 1; i <= 12; i++) {
	            months.push(i)
	        }
	        for (let i = 1; i <= 31; i++) {
	            days.push(i)
	        }
	        return {
				datePickerVisible:false,//显示弹窗
				checked: true,//switch的选中状态
	            title: 'picker-view',
	            years,
	            year,
	            months,
	            month,
	            days,
	            day,
	            value: [9999, month - 1, day - 1],
	            visible: true,
	            indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`
	        }
	    },
		watch:{
			datePickerVisible(nval){
				if(!nval){
					this.$parent.$data.showPopoupFlag=false;
					console.log(this.$parent.$data.showPopoupFlag)
				}
			}
		},
	    methods: {
	        bindChange: function (e) {
				console.log(e,this.value)
				
	            let val = e.detail.value
				// this.value=val
	            this.year = this.years[val[0]]
	            this.month = this.months[val[1]]
	            let day = this.days[val[2]];//获取选中的日期

				this.day=this.correctDay(this.year,this.month,day);//获取矫正后的日期
				let dayIndex=this.days.findIndex(item=>{
					return item==this.day
				})
				val[2]=dayIndex
				this.value=val

	        },
			correctDay(year,month,day){//更正每月日期
				let maxDay = new Date(year,month,0).getDate()//获取当月有多少天
				
				if(maxDay<day){
					return maxDay
				}else{
					return day
				}
			},
			changeSwitch(e){
				//改变switch
				this.checked=e.detail.value;
			},
			sendDate(){
				let data={
					year:this.year,
					month:this.month,
					day:this.day,
					showFlag:this.checked,
					astro:this.getAstro(this.month,this.day)
				}
				this.$emit('getDate',data);
				this.datePickerVisible=false;
			},
			getAstro(month,day){
				//获取星座
			  var s="魔羯水瓶双鱼牧羊金牛双子巨蟹狮子处女天秤天蝎射手魔羯";
			  var arr=[20,19,21,21,21,22,23,23,23,23,22,22];
			  return s.substr(month*2-(day<arr[month-1]?2:0),2);
			},
			toggleVisible(){
				this.datePickerVisible=!this.datePickerVisible;
			}
	    }
	}
</script>

<style scoped lang="scss">
	.header{
		margin:20rpx 30rpx 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.btn-confirm{
			color: green;
		}
	}
	.item{
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
</style>
